<template>
  <el-popover
    ref="popover"
    placement="bottom-start"
    trigger="click"
    :disabled="disabled"
    @show="onShowPopover"
    @hide="onHidePopover"
  >
    <dx-treelist
      ref="treelist"
      class
      :max-height="300"
      :filterable="filterable"
      :codeType="codeType"
      :condition="condition"
      :expandLevel="expandLevel"
      :style="`min-width: ${treeWidth};max-width:${maxWidth}`"
      @node-click="onClickNode"
      @tree-loaded="treeLoaded"
      :disabled="disabled"
    ></dx-treelist>
    <el-input
      slot="reference"
      ref="input"
      :disabled="disabled"
      :value="mText"
      :style="`width: ${width}px`"
      class="treeselect-drop-input"
      :readonly="true"
      :placeholder="placeholder"
      @mouseenter.native="inputHovering = true"
      @mouseleave.native="inputHovering = false"
    >
      <i
        slot="suffix"
        :class="['el-select__caret', 'el-input__icon', 'el-icon-' + iconClass]"
        @click="handleIconClick"
      ></i>
    </el-input>
  </el-popover>
</template>

<script>
import DxTreelist from "./dx-treelist";
export default {
  components: {
    DxTreelist
  },
  name: "dx-treeselect",
  props: {
    value: null,
    width: String,
    codeType: String,
    condition: { type: Object, default: () => {} },
    expandLevel: { type: Number, default: 3 },
    clearable: { type: Boolean, default: false },
    filterable: { type: Boolean, default: false },
    leafable: { type: Boolean, default: false }, //是否可以只选择子叶
    multiple: { type: Boolean, default: false },
    disabled: { type: Boolean, default: false },
    placeholder: {
      type: String,
      required: false,
      default: "请选择"
    }
  },

  watch: {
    value(val) {
      if (this.treeData && val !== this.mValue) {
        this.mValue = val;
        let node = this.$refs.treelist.getTreeNodeById(val, this.treeData);
        this.mText = node["name"] || this.mValue;
        this.mValue = node["id"] || this.mValue;
      }
    }
    // codeType(val){//代码模型变化
    //     this.getTreeData();
    // },
    // condition(val){//条件变化
    //
    // }
  },
  computed: {
    iconClass() {
      let criteria = this.clearable && !this.disabled && 
        this.inputHovering &&
        !this.multiple &&
        this.value !== undefined &&
        this.value !== null &&
        this.value !== "";
      return criteria
        ? "circle-close is-show-close"
        : this.showStatus
        ? "arrow-up"
        : "arrow-down";
    }
  },
  data() {
    return {
      showStatus: false,
      treeWidth: "0",
      maxWidth: "0",
      mValue: this.value,
      mText: "",
      inputHovering: false,
      currentNode: null,
      treeData: []
    };
  },
  updated() {
    this.updateUI();
  },
  created() {
    this.mValue = this.value;
  },
  methods: {
    updateUI(){
      //获取输入框宽度同步至树状菜单宽度
      this.$nextTick(() => {
        let width = (this.width || this.$refs.input.$el.clientWidth) - 24;
        this.treeWidth = `${width}px`;
        this.maxWidth = `${width + 100}px`;
      });
    },
    handleIconClick(event) {
      if (this.iconClass.indexOf("circle-close") > -1) {
        this.deleteSelected(event);
      }
    },
    deleteSelected(event) {
      event.stopPropagation();
      this.$emit("input", "");
      this.showStatus = false;
      this.$emit("clear");
    },
    emitChange() {
      this.$emit("change", this.currentNode);
    },
    // 单击节点
    onClickNode(node) {
      if (this.leafable && node.childrens && node.childrens.length > 0) {
        return;
      }
      this.mText = node["name"];
      this.mValue = node["id"];
      this.currentNode = node;
      this.onCloseTree();
 
    },
    // 隐藏树状菜单
    onCloseTree() {
      this.$refs.popover.doClose();
    },
    //加载完成
    treeLoaded(treeData) {
      this.treeData = treeData;
      if (this.mValue) {
        let node = this.$refs.treelist.getTreeNodeById(this.mValue, treeData);
        this.mText = node["name"] || this.mValue;
        this.mValue = node["id"] || this.mValue;
      }
      this.$emit("treeLoaded",treeData);
    },

    // 显示时触发
    onShowPopover() {
      if(this.disabled) return;
      this.showStatus = true;
      if (this.mValue) {
        this.expandIds = [this.mValue];
        this.$nextTick(() => {
          this.$refs.treelist.setCurrentKey(this.mValue);
        });
      }
    },
    // 隐藏时触发
    onHidePopover() {
      this.showStatus = false;
      this.$emit("input", this.mValue);
      this.$nextTick(()=>{
          this.emitChange();
      });
     
    }
  }
};
</script>

<style scoped>

.treelist-panel {
  overflow: hidden;
  overflow-y: scroll;
  overflow-x: scroll;
}
.el-input:focus {
  outline: none;
}
.el-input.treeselect-drop-input input {
  cursor: pointer;
}
/* .el-input .el-input__inner {
  border-color: #2f3c5e;
}
.el-input .el-input.is-focus .el-input__inner {
  border-color: #2f3c5e;
} */
.el-input.el-input--suffix {
  cursor: pointer;
  overflow: hidden;
}
.el-input.el-input--suffix.is-reverse .el-input__suffix {
  -webkit-transform: rotateZ(180deg);
  transform: rotateZ(180deg);
}
/* .select-tree {
    max-height: 350px;
    overflow-y: scroll;
  } */
</style>